<template>
  <div class="lr-contail" :class="[{'lr-theme-nav-side':appConfig.theme.nav == 'side'},{'lr--collapse':isCollapse}]" style="transition: all 0.6s ease-in-out;">
    <div :class="['lr-header']" v-show="!appConfig.online"  >
      <!-- 顶部导航栏 -->
      <top ref="top" />
    </div>
    <div class="lr-layout">
      <div :class="['lr-left',{'lr-left-online':appConfig.online}]">
        <!-- 左侧导航栏 -->
        <sidebar />
      </div>
      <div :class="['lr-main',{'lr-main-online':appConfig.online}]">
        <!-- 顶部标签卡 -->
        <!-- <tags /> -->
        <!-- 主体视图层 -->
        <div style="height:100%;width: 100%;position: relative;"
            id="lr-view">
          <div class="l-load-views" >
            <div class="lr-home__main" >
              <l-loading></l-loading>
            </div>
            <div class="lr-home__footer" style="position: absolute;" >
              <a :href="appConfig.url" target="_blank">{{appConfig.company}}</a>
            </div>
          </div>
          
            <transition name="fade-transform" mode="out-in" >
              <template v-if="isRouterAlive && !tagLoading">
                <keep-alive>
                  <router-view class="lr-view"
                              v-if="$route.meta.keepAlive"/>
                </keep-alive>
              </template>
            </transition>
            <transition name="fade-transform" mode="out-in">
              <router-view class="lr-view"
                          v-if="!$route.meta.keepAlive && isRouterAlive && !tagLoading" />
            </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
//import tags from "./tags"
import top from "./top"
import sidebar from "./sidebar"
export default {
  components: {
    top,
    //tags,
    sidebar
  },
  name: "index",
  provide () {
    return {
      admin: this
    };
  },
  data () {
    return {
      isRouterAlive:true
    };
  },
  async created () {
    this.refreshMenu();
  },
  mounted () {
    this.init();
  },
  computed:{ ...mapGetters(["isCollapse","tag",'tagLoading'])},
  props: [],
  methods: {
    // 屏幕检测
    init () {
      this.$store.commit("app/SET_SCREEN", document.body.clientWidth);
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit("app/SET_SCREEN", document.body.clientWidth);
        }, 0);
      };
    },
    //打开菜单
    refreshMenu () {
      this.$nextTick(() => {
        this.$refs.top.initTopMenu();
      })
    },
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(()=>{
        this.isRouterAlive = true;
      })
    }
  }
};
</script>

<style lang="scss">
.l-load-views{
  position: absolute;
  height: 100%;
  width: 100%;
  top:0;
  left: 0;
}
</style>